<template>
  <div class="container">
    <el-card>
        <section class="account-box">
        <span class="account-box__left">
              <el-form label-width="60px">
                    <el-form-item >
                        <p>订单号：{{orderId}}</p>
                    </el-form-item>
                    <el-form-item>
                        <p>请在一小时内完成支付，否则订单会被自动取消。</p>
                    </el-form-item>
                </el-form>
        </span>

        <span class="account-box__right">
             <h3 slot="header">实付：{{total}}</h3>
        </span>
        </section>
    </el-card>
    <el-card>
        <h3 slot="header">选择支付方式</h3>
        <section class="account-box">
        <span class="account-box__left">
             <el-radio v-model="radio" label="0" border @change="pay_select">支付宝</el-radio>
             <el-radio v-model="radio" label="1" border @change="pay_select">微信</el-radio>
             <el-radio v-model="radio" label="2" border @change="pay_select">网银</el-radio>
        </span>
        <span class="account-box__right">
            <el-button type="primary" size="small" @click="pay_quick">立即付款</el-button>
        </span>
        </section>
    </el-card>
  </div>
</template>

<script>
  import { doOrderPaySuccess } from '@/apis/order';
  export default {
    name: 'Orderinfo',
    data() {
      return {
        radio: '0',
        orderId: '',
        orderids: 0,
        total: 0,
        product: null
      };
    },
    methods: {
      async pay_select(select) {
        // console.log(select);
      },
      async pay_quick() {
        console.log(this.orderids);
        console.log(this.orderId);
        const pic_QR_code = 'http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg';
        const res_success = await doOrderPaySuccess({ orderId: parseInt(this.orderids) });
        console.log('test---------------pay' + JSON.stringify(res_success));
        this.$router.push({
          path: '/payquick',
          query: { pay_total: this.pay_total, pic: pic_QR_code, id: this.orderids }
        });
      }
    },
    mounted() {
      this.orderId = this.$route.query.orderId;
      this.total = this.$route.query.price;
      this.product = this.$route.query.row;
      this.orderids = this.$route.query.orderids;
    }
  };
</script>>

<style lang="scss" type="text/scss" scoped>
$space: 6px;
.box-card {
  margin-top: $space * 2;
}

.el-card {
    margin-bottom: 40px;
    .account-box {
      @include h-btw();
      &__left {
        @include v-center();
      }
      &__right {
        @include v-center();
        span {
          display: block;
          font-size: 12px;
          width: 80px;
          height: 80px;
          line-height: 80px;
          text-align: center;
          background-color: $c1;
          color: white;
          border-radius: 50%;
          margin: 0 10px;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
}

.list {
  display: flex;
  padding: $space;
  flex-wrap: wrap;
  background-color: $c1;
  &__item {
    background-color: white;
    flex-basis: calc(20% - #{$space * 2});
    margin: $space;
    flex-shrink: 0;
    overflow-x: hidden;
  }
}
</style>
